let indexApp = new Vue({
  el: '#indexApp',
  data: {
    chart: null,
    currentDate:''
  },
  created() {
    this.fetchData();
    this.MainCom();
    // 初始化日期
    this.updateDate();
    // 每秒更新时间
    this.interval = setInterval(this.updateDate, 1000);
  },
  methods: {
    // 获取video各类总数
    async fetchData() {
      try {
        const [videoRes, tvRes, musicRes, cartonRes, playRes] = await Promise.all([
          $.ajax({ url: '/web/collection/selectByTypeId?type=1', type: 'GET' }),
          $.ajax({ url: '/web/collection/selectByTypeId?type=2', type: 'GET' }),
          $.ajax({ url: '/web/collection/selectByTypeId?type=3', type: 'GET' }),
          $.ajax({ url: '/web/collection/selectByTypeId?type=4', type: 'GET' }),
          $.ajax({ url: '/web/collectionPlay/selectByTypeId', type: 'GET' })
        ]);
        this.video = videoRes;
        this.tv = tvRes;
        this.music = musicRes;
        this.carton = cartonRes;
        this.play = playRes;
        this.updateChartData();
      } catch (error) {
        console.error('请求失败:', error);
      }
    },
    updateChartData() {
      const d = [
        { value: this.video, name: '电影' },
        { value: this.tv, name: '剧集' },
        { value: this.music, name: '综艺' },
        { value: this.carton, name: '动画' },
        { value: this.play, name: '短剧' }
      ];
      console.log(d);
      const chartDom = this.$refs.chartContainer;
          this.chart = echarts.init(chartDom);
          const option = {
            title: {
              text: '影视的总数量',
              subtext: 'Total Quantity',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '总存储量',
                type: 'pie',
                radius: '50%',
                data: d,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          this.chart.setOption(option);
        },
    // 获取用户总数量与总会员数量
    async MainCom() {
      try {
        const [videoRes, tvRes] = await Promise.all([
          $.ajax({ url: '/web/open/countBy', type: 'GET'}),
          $.ajax({ url: '/web/open/count', type: 'GET',data: {status: 1}  }),
        ]);
        this.video = videoRes;
        this.tv = tvRes;
        this.updateMainCom();
      } catch (error) {
        console.error('请求失败:', error);
      }
    },
    updateMainCom() {
      const d = [
        { value: this.video, name: '总用户' },
        { value: this.tv, name: '总会员' },
      ];
      console.log(d);
      const chartDom = this.$refs.mainCom;
      this.chart = echarts.init(chartDom);
      const option = {
        title: {
          text: '用户的总数量',
          subtext: 'User Quantity',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '总存储量',
            type: 'pie',
            radius: '50%',
            data: d,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.chart.setOption(option);
    },
    // 获取当前时间
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    updateDate() {
      const now = new Date();
      this.currentDate = this.formatDate(now);
    }

  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.interval);
  }
  });